<template>
  <div>
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancel"
      cancelText="关闭">
      <t-crossing-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></t-crossing-form>
    </j-modal>
    <j-modal
      :title="title"
      :width="detailWidth"
      :visible="detailVisible"
      switchFullscreen
      @ok="handleOk"
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancelDetail"
      cancelText="关闭">
      <t-cross-detail-form ref="realDetailForm" @ok="submitCallback" :disabled="disableSubmit"></t-cross-detail-form>
    </j-modal>
</div>
  
</template>

<script>

  import TCrossingForm from './TCrossingForm'
  import TCrossDetailForm from './TCrossDetailForm.vue'

  export default {
    name: 'TCrossingModal',
    components: {
      TCrossingForm,
      TCrossDetailForm
    },
    data () {
      return {
        title:'',
        width:1400,
        detailWidth:1400,
        visible: false,
        disableSubmit: false,
        detailVisible: false
      }
    },
    methods: {
      add () {
        this.visible=true
        this.detailVisible=false;
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
      },
      edit (record) {
        this.visible=true;
        this.detailVisible=false;
        this.$nextTick(()=>{
          this.$refs.realForm.edit(record);
        })
      },
      view (record){
        this.visible=false;
        this.detailVisible=true;
        this.$nextTick(()=>{
          this.$refs.realDetailForm.view(record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      handleCancelDetail(){
        this.$emit('close');
        this.detailVisible = false;
      }
    }
  }
</script>